<template>
  <div class="main">
    <div class="mainT">
      <div class="mainTTitle">
        <el-button type="primary" round @click="toRecycle">回收站</el-button>
      </div>
      <div class="mainTName">新闻列表</div>
      <div class="mainTOperate">
        <div class="mainTAdd">
          <el-button type="primary" round @click="addData">添加</el-button>
        </div>
        <div class="mainTChange">
          <el-button type="primary" round @click="changeData">修改</el-button>
        </div>
        <div class="mainTDelete">
          <el-button type="primary" round @click="deleteSumData">批量删除</el-button>
        </div>
      </div>
    </div>
    <div class="mainB">
      <el-table
        :data="tableData"
        @select="getSelectNum"
        @selection-change="handleSelectionChange"
        @select-all="selectAll"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="id" width="80"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="releaseTime" label="发布时间"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column prop="summary" label="简介" width="300"></el-table-column>
        <el-table-column prop="keyword" label="关键字" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClickLook(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="handleClickDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tablePage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          :total="sumList"
          :page-size="everNum"
          :current-page="currentPage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      tableData: [], //每页的数据
      allData: [], //所有的数据
      sumList: 16, //总条数
      everNum: 5, //每一页最多的数量
      currentPage: 1, //当前是第几页
      selected: [], //被选中的数据
    };
  },
  mounted() {
    var that = this;
    this.$axios.get(`${this.baseURL}` + '/news').then((res) => {
      var listData = JSON.parse(JSON.stringify(res.data.data));
      var i;
      for (i = 0; i < listData.length; i++) {
        if (listData[i].updateTime != undefined)
          listData[i].updateTime = listData[i].updateTime.substring(0, 10);
        if (listData[i].releaseTime != undefined)
          listData[i].releaseTime = listData[i].releaseTime.substring(0, 10);
      }
      //规范时间之后
      that.allData = listData;
      // console.log(listData)
      var list = JSON.parse(JSON.stringify(that.allData));
      list.splice(that.everNum, list.length - that.everNum);

      that.sumList = that.allData.length;
      that.tableData = list; //获取第一页的数据
    });
  },
  methods: {
    toRecycle() {
      var that = this;
      // console.log("跳转到回收站");
      this.$router.push({
        name: 'recycle_binNews',
      });
    },
    selectAll(val) {
      // console.log(val)
      this.selected = val;
    },
    addData() {
      var that = this;
      // console.log("添加数据");
      this.$router.push({
        name: 'creat_news',
        params: {
          info: that.selected[0],
        },
      });
    },
    changeData() {
      var that = this;
      // console.log("修改数据");
      if (this.selected.length == 0) {
        alert('请选择数据！');
      } else if (this.selected.length == 1) {
        //如果选中的数据为一个就可以进入修改界面
        this.$router.push({
          name: 'revise_news',
          params: {
            info: that.selected[0],
          },
        });
      } else {
        alert('请选择一个数据！');
      }
    },
    deleteSumData() {
      const that = this;
      // console.log("批量删除");
      if (this.selected.length == 0) {
        //如果没有选中数据就不可以删除
        alert('请选择数据！');
      } else {
        // console.log(this.selected[0].id)
        var i = 0;
        for (i = 0; i < this.selected.length; i++) {
          this.$axios
            .delete(`${this.baseURL}` + '/news/' + this.selected[i].id)
            .then((res) => {
              // console.log(res);
              this.$message({
                message: '删除成功',
                type: 'success',
              });
              that.reload();
            });
        }
      }
    },
    getSelectNum(val) {
      //选中了什么
      // console.log(val);
      this.selected = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClickLook(row) {
      var that = this;
      //查看，row有全部的数据
      this.$router.push({
        name: 'revise_news',
        params: {
          info: that.selected[0],
        },
      });
      // console.log(row);
    },
    handleClickDelete(row) {
      const that = this;
      //删除，row有全部的数据
      // console.log(row.id);
      this.$axios.delete(`${this.baseURL}` + '/news/' + row.id).then((res) => {
        // console.log(res);
        this.$message({
          message: '删除成功',
          type: 'success',
        });
        that.reload();
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // console.log(this.currentPage);
      var i;
      this.tableData = [];
      for (
        i = 0;
        i + (val - 1) * this.everNum < this.allData.length && i < this.everNum;
        i++
      ) {
        this.tableData[i] = this.allData[i + (val - 1) * this.everNum];
      }
      // console.log(i)
      // this.currentPage=val
    },
  },
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 80vh;
  /* //   border: 1px solid black; */
  box-sizing: border-box;
}
.main .mainT {
  width: 100%;
  height: 10%;
  /* // border: 1px solid black; */
  box-sizing: border-box;
  display: flex;
}
.main .mainT .mainTTitle {
  height: 100%;
  width: 20%;
  /* //   border: 1px solid black; */
  box-sizing: border-box;
}
.main .mainT .mainTName {
  width: 50%;
  font-size: 24px;
  text-align: center;
}
.main .mainT .mainTOperate {
  height: 100%;
  width: 30%;
  /* //   border: 1px solid black; */
  box-sizing: border-box;
  flex-direction: row-reverse;
  display: flex;
  /* //   align-items: center; */
}
.main .mainT .mainTAdd {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 25%;
  /* // border: 1px solid black; */
  box-sizing: border-box;
}
.main .mainT .mainTChange {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 25%;
  /* // border: 1px solid black; */
  box-sizing: border-box;
}
.main .mainT .mainTDelete {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 30%;
  /* // border: 1px solid black; */
  box-sizing: border-box;
}
.main .mainB {
  width: 100%;
  height: 90%;
  /* // border: 1px solid black; */
  box-sizing: border-box;
}
.main .mainB /deep/ .el-table .cell {
  text-align: center;
}
.main .mainB /deep/ .el-table td,
.main .el-table th {
  padding: 0.8% 0 !important;
}
.main .mainB .tablePage {
  /* display: flex; */
  width: 100%;
  height: 5%;
  /* //   border: 1px solid black; */
  box-sizing: border-box;
  text-align: center;
}
.main .mainB /deep/ .el-table .cell {
  line-height: 100%;
}
</style>